<template>
  <div>
    <div>
      <ul>
        <li v-for="item in messageList" :key="item.id">
          <!-- 写法一：跳转路由并携带query参数，to的字符串写法 -->
          <!-- <router-link :to="`/home/message/detail/${item.id}/${item.title}`">{{item.title}}</router-link>&nbsp;&nbsp; -->

          <!-- 写法二：对象写法 注意只能用name,不能用成path -->
          <router-link
            :to="{
              name: 'xiangqing',
              params: {
                id: item.id,
                title: item.title,
              },
            }"
          >
            {{ item.title }}
          </router-link>
          <button @click="pushShow(item)">push查看</button>
          <button @clik="replaceShow(item)">replace查看</button>
        </li>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "Message",
  data() {
    return {
      messageList: [
        {
          id: "001",
          title: "消息001",
        },
        {
          id: "002",
          title: "消息002",
        },
        {
          id: "003",
          title: "消息003",
        },
      ],
    };
  },
  methods: {
    pushShow(item) {
      //   console.log(this.$router)
      this.$router.push({
        name: "xiangqing",
        params: {
          id: item.id,
          title: item.title,
        },
      });
    },
    replace(item) {
      this.$router.replace({
        name: "xiangqing",
        params: {
          id: item.id,
          title: item.title,
        },
      });
    },
  },
};
</script>

